<!-- 课程详情 -->
<template>
  <div :class="['detail-wrapper', {'preview-page': isPreview}]">
        <div class="preview-tag-wrap" v-if="isPreview">
            <i class="iconfont icon-tishi"></i>
            <span class="text">当前为预览状态，请不要进行操作，操作无效</span>
        </div>
       <DetailHeader :detail="detailData" @obtain-course="obtainCourse" :is-preview="isPreview"/>
        <div class="detail-container mt20">
            <el-tabs v-model="currentTab" class="custom-tabs" @tab-change="changeTab">
                <el-tab-pane
                    v-for="tab in tabList"
                    :key="tab.key"
                    :label="tab.name"
                    :name="tab.key">
                </el-tab-pane>
            </el-tabs>
            <component
                :is="componentMap[currentTab]"
                :current-tab="currentTab"
                :detail="detailData"
                :is-buy-person="isBuyPerson"
                :is-creater="isCreater"
                :is-manage="isManage"
                :is-preview="isPreview"
                @obtain-course="obtainCourse"
                @refresh-detail="refreshDetail"></component>  
        </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch, watchEffect } from 'vue';
import DetailHeader from './part/detail-header.vue'
import CourseIntroduction from './fragment/course-introduction/index.vue';
import CourseCatalogue from './fragment/course-catalogue/index.vue';
import CourseAssignment from './fragment/course-assignment/index.vue';
import CourseTest from './fragment/course-test/index.vue';
import CourseComment from './fragment/course-comment/index.vue';
import Confirm from '@/components/confirm/confirm.js';
import { jumpHref } from '@/router/jumpHref.js';

import { useRoute } from 'vue-router';
import { useStore } from 'vuex';

/*
慕课产品：胡贺宁

慕课详情
1. 创建人可以直接查看课件，其他权限由是否报名控制

慕课管理
1. 从管理后台进入慕课详情，获取是否具有查看慕课详情的权限，有权限可以直接查看课件，其他的权限由报名与否控制。

慕课预览 （产品希望预览只展示课程本身的数据，不显示个人数据） 需求确定日期：2022-10-10
1. 慕课详情页头部一直显示报名学习按钮，后边的已学课节提交作业分数的个人信息部分不展示，点击报名学习按钮给统一提示。
2. 慕课详情页及看课页课程目录部分，一直保持未报名状态，所以不显示未开始、学习中、已完成字段。
3. 慕课作业不展示已完成、查看作业、重新作答等个人作业完成情况标识，始终显示去作答按钮，点击去作答按钮给统一提示。
4. 慕课课程评价一直保持未评价的状态，点击发表评价按钮给统一提示，点击评论列表的删除给统一提示。
5. 慕课看课页讨论一直显示，点击发表讨论按钮给统一提示，讨论列表的删除给统一提示。
6. 慕课看课只有购买了课程，并且不是预览的状态，才会计时。
7. 统一提示语：预览状态下不可操作

慕课推优wiki地址: https://wiki.3ren.cn/pages/viewpage.action?pageId=56950846
*/

const store= useStore();

const route = useRoute();

// 判断是否登录
const isLogin = computed(() => {
    return store.state.isLogin;
})

// 是否是创建者
const isCreater = computed(() => {
    return detailData.value?.isMyCreate;
})

// 是否是购买者
const isBuyPerson = computed(() => {
    return detailData.value?.isBuy;
})

// 是否是管理员 是否是从管理中心进入的页面
const isManage = ref(false);

const componentMap = {
    CourseIntroduction,
    CourseCatalogue,
    CourseAssignment,
    CourseComment,
    CourseTest
};

// 底部tabList
const tabList = ref([
    {
        name: '课程介绍',
        key: 'CourseIntroduction',
    },
    {
        name: '课程目录',
        key: 'CourseCatalogue',
    },
    {
        name: '课程作业',
        key: 'CourseAssignment',
    },
    {
        name: '课程测试',
        key: 'CourseTest',
    },
    {
        name: '课程评价',
        key: 'CourseComment',
    }
]);

// 当前tab
const currentTab = ref('CourseIntroduction');

// 课程详情
const detailData = ref({});

const errorMsgMap = {
    'delete': '很抱歉，该慕课已下线', // 删除
    'disabled': '很抱歉，该慕课已下线', // 禁用
    'unpublished': '很抱歉，当前慕课还未发布，敬请期待', // 未发布
    'notsignup': '还未报名慕课哦，请先报名', // 没报名
    'noauthority': '很抱歉，您暂无查看权限' // 没权限
}

// 是否是预览状态
const isPreview = ref(false);

// 获取课程详情
// state 状态（0-暂存、1-提交（待提审）、2-待审核、3-审核驳回、4-审核通过）
// publishState 发布状态（0-未发布 1-已发布）
// enable 是否启用 1启用 -1禁用
async function getDetail () {
    try {
        let res = await  G_transmit('moocDetail', {
            queries: {
                id: route.params.moocId
            },
            silence: true
        })
        detailData.value = res.data || {};

        // 不是购买者 并且不是创建人
        let notCourseUser = !detailData.value?.isBuy && !detailData.value?.isMyCreate;
        
        let isPublish = detailData.value?.publishState == 1 && detailData.value?.state == 4;

        // 课程未发布 只有创建人能看 已报名的人也能看
        if (!isPublish && notCourseUser) {
            G_dispatchEvent('toErrorPage', { title: errorMsgMap.unpublished, code: 500, target:  jumpHref.home.mooc(), buttonLabel: '查看其他慕课'});
        }
        store.dispatch('setBreadCrumb', [{name: detailData.value.title}])
    } catch(_err) {
        // 禁用课程 30800500 删除课程 30800404
        if (_err.status && _err.status.code && [30800500, 30800404].includes(_err.status.code)) {
            G_dispatchEvent('toErrorPage', { title: errorMsgMap.delete, code: 500, target:  jumpHref.home.mooc(), buttonLabel: '查看其他慕课'});
        } else {
            G_dispatchEvent('toast', { message: _err?.status?.desc || '服务开小差了～', type: 'error'});
        }
    }
}

// 后端获取课程详情
// state 状态（0-暂存、1-提交（待提审）、2-待审核、3-审核驳回、4-审核通过）
// publishState 发布状态（0-未发布 1-已发布）
// enable 是否启用 1启用 -1禁用
async function getManageDetail () {
    try {
        let res = await  G_transmit('moocManageDetail', {
            queries: {
                id: route.params.moocId
            },
            silence: true
        })
        detailData.value = res.data || {};
    } catch(_err) {
        console.log(_err);
        // 禁用课程 30800500 删除课程 30800404
        let moocSquare = '/idx/mooc/square';
        if (_err.status && _err.status.code && [30800500, 30800404].includes(_err.status.code)) {
            G_dispatchEvent('toErrorPage', { title: errorMsgMap.delete, code: 500, target: moocSquare, buttonLabel: '查看其他慕课'});
        } else {
            G_dispatchEvent('toast', { message: _err?.status?.desc || '服务开小差了～', type: 'error'});
        }
    }
}

// 领取课程
async function obtainCourse (isApplyBtn) {
    await store.dispatch('checkIsLogout');
    // 预览详情页不能操作
    if (isPreview.value) {
        G_dispatchEvent('toast', { message: '预览状态下不可操作', type: 'error'});
    } else if ([4].includes(detailData.value?.state)) { // 课程发布了才能报名
        if (isApplyBtn) { // 是否是领取课程按钮 领取课程按钮不用出来弹窗 点击其他地方才需要出来弹窗
            applyLesson();
        } else {
            Confirm({
                title: '提示',
                text: '为了记录学习数据，请先报名课程',
                submitText: '点击报名'
            }).then(ret => {
                applyLesson();
            }).catch(err => {
                if (err === 'cancel') {
                    return false;
                }
            })
        }
    } else { // 课程未发布
        G_dispatchEvent('toast', { message: '当前慕课未发布，暂时不允许此项操作', type: 'error'});
    }
}

// 领取课程的方法
function applyLesson (noTip) {
    G_transmit('obtainMooc', {
        data: {
            buyType: 1, // 选课方式 1-自己选课（购买）
            moocId: route.params.moocId,
            price: 0
        }
    }).then((res) => {
        noTip || G_dispatchEvent('toast', { message: '报名成功', type: 'success'});
        getDetail();
    }).catch(_err => {
        console.log(_err);
    })
}

// 获取管理权限
async function getManageAuth () {
    try {
        await G_transmit('checkPermissionByKeyAndUserId', {
            queries: {
                permissionkey: 'siteAdmin:application:mooc:courseMange', // 慕课课程管理菜单的key 有菜单权限表示能查看详情页
                userId: store.state?.currentUser?.userId
            },
            silence: true
        })
    } catch(_err) {
        isManage.value = _err == 1;
        if (isManage.value) {
            getManageDetail();
        } else {
            G_dispatchEvent('toErrorPage', { title: errorMsgMap.noauthority, code: 500});
        }
    }
}



function changeTab () {
    window.history.replaceState('', '', `?tab=${currentTab.value}`);
}

function refreshDetail () {
    if (route.name === 'manageDetail') { // 从管理端进入的
        getManageAuth();
    } else {
        getDetail();
    }
}

/**
 * 自动报名学习
 */
function autoApplyLesson() {
    const taskId = route.query.taskId;
    if (!taskId || detailData.value.isBuy || isPreview.value) return; // 没有专题ID或者已经报名或预览状态
    G_transmit('isTopicMember', {
        queries: {
            taskId,
            moocId: route.params.moocId
        }
    }).then((res) => {
        res.data.attendFlag && applyLesson(true);
    });
}

onMounted(async () => {
    await store.dispatch('checkIsLogout');
    isPreview.value = route.name === 'previewDetail';
    if (route.query.tab) {
        currentTab.value = route.query.tab;
    }
    if (route.name !== 'manageDetail') { // 不是从管理端进入的
        await getDetail();
        autoApplyLesson();
    }
})

// 监听个人信息变化
watch(() => store.state.currentUser, (val) => {
    if (Object.keys(val).length !== 0) {
        if (route.name === 'manageDetail') { // 从管理端进入的
            getManageAuth();
        }
    }
}, {immediate: true});

// 全部备案信息
const brand = computed(() => {
    return store.state.brand && store.state.brand.publishBrand ? store.state.brand.publishBrand : {};
})

// 具体备案信息
const brandInfo = computed(() => {
    return brand.value.brandConfig ? brand.value.brandConfig : {};
})

watchEffect(() => {
    let lessonName = detailData.value?.title ? detailData.value?.title : '';
    let siteName = brandInfo.value?.siteName ? '-' + brandInfo.value?.siteName : ''
    document.title = lessonName + siteName
})


</script>

<style lang="scss" scoped>
.preview-page {
    margin-top: -8px;
}
.detail-wrapper {
    background: #F8F8F8;
    .preview-tag-wrap {
        height: 34px;
        background: #FFF7EB;
        border-radius: 4px;
        border: 1px solid #FFEFD9;
        margin: -4px 0 16px 0;
        display: flex;
        align-items: center;
        color: #BA6009;
        font-size: 14px;
        padding: 0 10px;
        font-family: MicrosoftYaHei;
        .iconfont {
            font-size: 18px;
            color: var(--srt-color-warning);
            margin-right: 6px;
            margin-top: -2px;
        }
        .text {
            line-height: 32px;
        }
    }
}
.mt20 {
    margin-top: 20px;
}
.detail-container {
    min-height: 580px;
    background: #FFFFFF;
    border-radius: 4px;
    overflow: hidden;
    text-align: left;
    .custom-tabs {
        height: 62px;
        :deep(.el-tabs__item) {
            height: 59px;
            line-height: 59px;
            font-size: 16px;
            font-weight: 400;
            color: var(--srt-main-text-color);
            box-shadow: none;
            &.is-active {
               color: var(--srt-main-active-text-color)
            }
        }
        :deep(.el-tabs__nav-wrap) {
            padding: 0px 21px;
            &::after{
                height: 1px;
                background-color: #CBCBCB;
            }
        }
        :deep(.el-tabs__active-bar) {
            height: 3px;
        }
        :deep(.el-tabs__header) {
            margin: 0;
        }
    }
}

</style>